<template>
  <div class="outPageBox">
    <template v-if="!isLoading">
      <div class="outPageBox-head">
        <template v-if="detail.status === 1">
          <div class="outPageBox-head-image">
            <img src="../../../assets/order/order_success.png" />
          </div>
          <div class="outPageBox-head-status">兑换成功</div>
          <div class="outPageBox-head-orderNumber">
            订单流水号：{{ detail.orderId }}
          </div>
          <div class="outPageBox-head-orderTime">
            领取时间：{{ detail.orderTime }}
          </div>
        </template>
        <template v-else>
          <div class="outPageBox-head-image">
            <img src="../../../assets/order/order_fail.png" />
          </div>
          <div class="outPageBox-head-status">兑换失败</div>
          <div class="outPageBox-head-orderNumber">{{ detail.message }}</div>
        </template>
      </div>
      <div class="outPageBox-foot">
        <div class="outPageBox-foot-confirm" @click="onOpen">
          前往微信小程序使用
        </div>
        <div class="outPageBox-foot-back" @click="goBack">返回</div>
      </div>
    </template>
    <template v-else>
      <div class="load">
        <van-loading size="24px" vertical
          >正在为您生成订单，请稍后...</van-loading
        >
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detail: {},
      isLoading: true,
    };
  },
  mounted() {
    if (Object.keys(this.$route.query).length > 0) {
      const { status, orderTime, message, orderId, wxUrl } = this.$route.query;
      this.detail = {
        status: Number(status),
        orderTime: orderTime,
        orderId: orderId,
        message: message,
        wxUrl: wxUrl,
      };
      setTimeout(() => {
        this.isLoading = false;
      }, 3000);
    }
  },
  methods: {
    goBack() {
      window.location.replace("/h5/");
    },
    onOpen() {
      window.open(`${this.detail.wxUrl}`);
    },
  },
};
</script>
<style lang="less" scoped>
.outPageBox {
  position: relative;
  height: 100vh;
  padding: 16px;
  box-sizing: border-box;
  &-head {
    width: 100%;
    height: 298px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    &-image {
      overflow: hidden;
      border-radius: 100px;
      image {
        height: 100px;
        width: 100px;
      }
    }
    &-status {
      font-weight: 600;
      font-size: 19px;
      color: #39394d;
      margin: 34px 0 10px;
    }
    &-orderNumber,
    &-orderTime {
      font-weight: 400;
      font-size: 12px;
      color: #909399;
      margin: 2px;
    }
  }
  &-foot {
    margin-top: 40px;
    width: 100%;
    &-confirm {
      background: linear-gradient(89.96deg, #ff8500 0.02%, #ff5f26 99.95%);
      height: 44px;
      border-radius: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 17px;
      color: #ffffff;
      margin-bottom: 10px;
    }
    &-back {
      background: #ffffff;
      height: 44px;
      border-radius: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 17px;
      color: #39394d;
    }
  }
}
.load {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
</style>
